<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport"
	content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
<link rel="shortcut icon" href="favicon.ico">
<link href="/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="/common/css/monitor/index_server_info.css" rel="stylesheet" />
<link rel="stylesheet" href="/common/css/monitor/index_monitor.css"
	type="text/css" media="screen" />
</head>
<style type="text/css">
.ih-item.circle.effect1 .spinner {
	width: 170px;
	height: 170px;
}

.ih-item.circle, .ih-item.circle .img {
	width: 170px;
	height: 170px;
}

.ih-item.circle.effect1 .info h3 {
	margin: 0 0px;
	padding: 47px 0 0;
}

.ih-item.circle.effect1 .info {
	top: 10px;
	bottom: 10px;
	left: 10px;
	right: 10px;
}

.case-item {
	margin: 32px 26px;
}

.btn-w-m {
	min-width: 70px;
}

.btn {
	outline: none;
}

.btn:focus {
	outline: 0;
}
.ih-item.circle.effect1 .info p{
    margin: -34px 14px;
}
.showEcharts{
	display: inline-block;
	width: 170px;
	text-align: center;
	margin: 10px 0px;
	font-size: 10px;
}
.activeBorder{
	border:1px solid #6699ff;
}
</style>
<body style="background-color: #f3f3f4;">
	<div style="position: relative;">
		<div id="">
			<!-- Row开始Start -->
			<div class="case-content" id="projectList"></div>
			<!-- row结束End -->
		</div>
		<button id="confirm" type="button" class="btn btn-w-m btn-white"
			style="color: #FFF; background-color: #1c84c6 !important; position: absolute; top: 10px; right: 26px; font-size: 24px;">确定</button>
	</div>
	<!-- End Panel Other -->
	<script src="/js/jquery.min.js?v=2.1.4"></script>
	<script src="/js/bootstrap.min.js?v=3.3.5"></script>
	<script src="/js/content.min.js?v=1.0.0"></script>
	<script src="/common/petecat.js"></script>
	<script src="/common/form.js"></script>
	<!-- HTML之间的传值 -->
	<script src="/js/jquery.params.js"></script>
	<script src="/js/plugins/layer-pc/layer.js"></script>
	<script src="/js/jquery.cookie.js"></script>
	<!-- 组件通用 -->
	<script src="/common/frame.js"></script>
	<!-- eCharts图表 -->
	<script src="/js/plugins/echarts/echarts-all.js"></script>
	<script type="text/javascript">
		$(function() {
			initProjectInfo();
		});
		var noProArray = new Array();
		$("#projectList").on("click",'.criter',function(){
			var id = $(this).find('input').val();
			var title = $(this).find("h3").text();
			var flag = $(this).hasClass("activeBorder");
			if(flag){
				$(this).removeClass("activeBorder");
				noProArray.remove(id);
			}else{
				$(this).addClass("activeBorder");
				noProArray.push(id);
			}
			console.dir(noProArray);
		});
		
		
		//确定
		$("#confirm").click(function(){
			parent.projectArray.push(noProArray);
			//ajax添加自定义项目
			addCustomIndexAjax(noProArray);
			//关闭本窗口
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		});
		
		//初始化项目列表
		function initProjectInfo() {
			var req = {};
			req['reqJSON'] = {
				type : 'get',
				async : false,
				url : BASE_URL + '/base/project/queryNoCustom?ids='+parent.projectArray
			};
			req['successFn'] = function(respData) {
				if (respData.code == SUCCESS_CODE) {
					if(respData.data.length == 0){
						$("#projectList").html("<h1 align='center'>您已经显示所有项目了,没有项目需要添加了哦!</h1>");
						return;
					}
					var peojectListHTML = projectAppendHtml(respData.data);
					$("#projectList").html(peojectListHTML.toString());
				} else {
					layer.msg(respData.message, {
						icon : 2
					});
				}
			};
			ajaxRequest(req);
		}
		
		//ajax添加自定义项目
		function addCustomIndexAjax(noProArray){
			var req = {};
			req['reqJSON'] = {
				type : 'get',
				 
				url : BASE_URL + '/base/custom/saveUserProject?ids='+noProArray
			};
			req['successFn'] = function(respData) {
				debugger
				if (respData.code == SUCCESS_CODE) {
					layer.msg(respData.message, {
						icon : 1
					});
				} else {
					layer.msg(respData.message, {
						icon : 2
					});
				}
			};
			ajaxRequest(req);
		}
		
		//拼接HTML到页面中
		function projectAppendHtml(projectList) {
			var sb = new StringBuffer();
			$.each(projectList,function(index, item) {
								sb.append('<div class="case-item">'
												+ '			<div class="ih-item circle effect1">'
												+ '			<input type="hidden" class="hidTok" value='+item.token+'>'
												+ '				<div class="criter">'
												+ '					<div class="spinner"></div>'
												+ '					<div class="info">'
												+ '			<input type="hidden" class="id" value='+item.id+'>'
												+ '						<div class="info-back">'
												+ '							<h3>' + item.text
												+ '</h3>' + '<p>服务器开机数：'+item.userServerCount+'台<br/>服务器总数量：'+item.serverTotal+'台</p>'
												+ '						</div>'
												+ '					</div>' + '				</div>'
												+ '			</div>' + '</div>');
							});
			return sb;
		}
		//实例化StringBuffer
		function StringBuffer() {
			this._strings_ = new Array();
		}

		StringBuffer.prototype.append = function(str) {
			this._strings_.push(str);
		};

		StringBuffer.prototype.toString = function() {
			return this._strings_.join("");
		};
		Array.prototype.indexOf = function (val) {
		    for (var i = 0; i < this.length; i++) {
		        if (this[i] == val) return i;
		    }
		    return -1;
		};

		Array.prototype.remove = function (val) {
		    var index = this.indexOf(val);
		    if (index > -1) {
		        this.splice(index, 1);
		    }
		};
	</script>

</body>
</html>